<template>
  <div class="exchange-success">
    <navBar :title="headerTitle"></navBar>
    <div class="main">
      <div class="re-change-card">
        <span class="card-info">安妮储值卡</span>
        <div class="card-price">
          <h5 class="price">
            <span>200</span>
            <span class="units">元</span>
          </h5>
          <p class="tips">送优惠券满30减15</p>
        </div>
      </div>
      <h5 class="main-title">安妮礼品卡兑换专属(感恩有你礼品卡)</h5>
      <div class="card-infor">
        <div>
          <span class="card-qus">卡号:</span>
          <span>1231234324</span>
        </div>
        <div>
          <span class="card-qus">密码:</span>
          <span>SHANXUU</span>
        </div>
        <div class="card-infor-bottom">
          <span>
            <span class="card-qus">发卡时间:</span>
            <span>2018.01.01</span>
          </span>
          <span>
            <span class="card-qus card-qus-red">余额:</span>
            <span class="card-qus-red">{{userInfo.user_money}}元</span>
          </span>
        </div>
      </div>
      <div class="main-tips">
        <span>恭喜你兑换成功!</span>
      </div>
      <van-button type="default" class="pay" @click="gohome">确认</van-button>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import {getUserInfo} from '@/utils/libs';
import { Button } from "vant";
Vue.use(Button);
export default {
  name: "exchangeSuccess",
  data() {
    return {
      userInfo: getUserInfo(),
      headerTitle: "兑换成功"
    };
  },
  components: {
    navBar
  },

  methods:{
    gohome(){
      this.$router.push({name:'m/enter/home'});
    }
  }
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.exchange-success {
  .main {
    padding-top: 90px;
    .main-tips {
      position: absolute;
      bottom: 200px;
      left: 50%;
      transform: translateX(-50%);
      width: 130px;
      height: 23px;
      font-size: 16px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(1, 47, 64, 1);
      line-height: 23px;
    }
    .main-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 216px;
      height: 43px;
      font-size: 15px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(48, 48, 48, 1);
      line-height: 22px;
    }
    .card-infor {
      position: absolute;
      top: 380px;
      height: 84px;
      width: 100%;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(171, 171, 171, 1);
      background-color: rgba(247, 247, 247, 1);
      div {
        padding: 5px 20px;
        box-sizing: border-box;
      }
      .card-qus {
        padding-right: 7px;
      }
      .card-qus-red {
        color: rgba(225, 52, 52, 1);
      }
      .card-infor-bottom {
        display: flex;
        justify-content: space-between;
      }
    }
    .re-change-card {
      position: absolute;
      left: 50%;
      top: -10px;
      transform: translateX(-50%);
      width: 264px;
      height: 163px;
      background: linear-gradient(
        203deg,
        rgba(238, 236, 232, 1) 0%,
        rgba(229, 227, 218, 1) 100%
      );
      border-radius: 7px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    }
    .re-change-card {
      position: relative;
      .card-info {
        position: absolute;
        right: 14px;
        top: 15px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(186, 186, 186, 1);
      }
      .card-price {
        position: absolute;
        top: 51px;
        left: 27px;
        .price {
          font-size: 41px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(71, 66, 69, 1);
          .units {
            font-size: 16px;
            font-family: PingFangSC-Medium;
            font-weight: 600;
            color: #474245;
          }
        }
        .tips {
          font-size: 13px;
          font-family: PingFangSC-Regular;
          font-weight: 500;
          color: rgba(71, 66, 69, 1);
        }
      }
    }
    .pay {
      position: absolute;
      bottom: 150px;
      left: 50%;
      transform: translateX(-50%);
    }
    .van-button--default {
      width: 333px;
      height: 41px;
      background: linear-gradient(
        90deg,
        rgba(1, 47, 64, 1) 0%,
        rgba(1, 47, 64, 1) 100%
      );
    }
    .van-button__text {
      width: 115px;
      height: 22px;
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
    }
  }
}
</style>
